<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
    <div id='app'>
        {{msg}}===
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                <input type='checkbox'>
                id:{{item.id}}==名称:{{item.name}}===价格:{{item.price}}===数量：{{item.num}}
            </li>
        </ul>
        <span>总价是：{{total}}</span>
    </div>
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                arr:[
                    {id:1,name:'鞋子',price:11,num:1},
                    {id:2,name:'裤子',price:12,num:2},
                    {id:3,name:'袜子',price:13,num:3}
                ],
                total:0
            }
        });
    </script>
</body>
</html>